<template>
  <div ref="echartRef" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts/core'
import { PieChart } from 'echarts/charts'
import {
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  GraphicComponent,
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必要的组件
echarts.use([
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  PieChart,
  CanvasRenderer,
  GraphicComponent,
])
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
})
// console.log('失分高频展示', props.data)
const echartRef = ref(null)
let mChart = null
onMounted(() => {
  mChart = echarts.init(echartRef.value)
  // 渲染 echarts
  renderChart()
})
const colorList = ['rgba(255, 88, 65)', 'rgba(255, 255, 255)', 'rgba(255,246,124)']
const colorListShadow = ['rgba(255, 88, 65,.3)', 'rgba(255, 255, 255,.3)', 'rgba(255,246,124,.3)']
// title index_deduct_num
const renderChart = () => {
  const data = props.data.map((item, index) => ({
    name: item.title,
    value: item.index_deduct_num,
    itemStyle: {
      color: colorList[index],
    },
  }))
  const dataShadow = props.data.map((item, index) => ({
    name: item.title,
    value: item.index_deduct_num,
    itemStyle: {
      color: colorListShadow[index],
    },
  }))
  // console.log('颜色', data)
  // 环形图配置项
  const option = {
    title: {
      text: '失分最高\n三项指标',
      left: 'center',
      top: 'center',
      textStyle: {
        fontSize: 15,
        color: '#fff',
        rich: {
          a: {
            color: '#fff',
            lineHeight: 32,
            align: 'center',
          },
        },
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}次',
      backgroundColor: 'rgba(44, 23, 14, 0.80)',
      borderColor: 'rgba(44, 23, 14, 0.80)',
      textStyle: {
        color: '#fff', // 设置 tooltip 文字颜色
      },
    },
    legend: {
      orient: 'vertical',
      right: '10%',
      top: 'center',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#fff',
      },
      formatter: function (name) {
        const endData = props.data.find((item) => item.title === name)
        return endData.short_title
      },
    },
    // graphic: [
    //   // 添加虚线边框
    //   {
    //     type: 'circle',
    //     shape: {
    //       cx: '50%',
    //       cy: '50%',
    //       r: '70%',
    //     },
    //     style: {
    //       stroke: 'rgba(255, 255, 255, 0.3)',
    //       lineWidth: 2,
    //       lineDash: [5, 5],
    //     },
    //   },
    //   {
    //     type: 'circle',
    //     shape: {
    //       cx: '50%',
    //       cy: '50%',
    //       r: '40%',
    //     },
    //     style: {
    //       stroke: 'rgba(255, 255, 255, 0.3)',
    //       lineWidth: 2,
    //       lineDash: [5, 5],
    //     },
    //   },
    // ],
    series: [
      {
        name: '失分指标',
        type: 'pie',
        radius: ['50%', '70%'], // 设置内半径和外半径，形成环形图
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        emphasis: false,
        labelLine: {
          show: false,
        },
        data: data,
      },
      {
        type: 'pie',
        radius: ['40%', '80%'],
        data: dataShadow,
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: '#40cffb',
          },
        },
      },
    ],
  }
  mChart.setOption(option)
}
watch(
  () => props.data,
  () => {
    renderChart()
  },
)
</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
